<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas实例</title>
    <style>
        .content{
            overflow: hidden;
            width:100%;
        }
        .canvas1{
            border: 1px solid #cecece;
        }
        .setRice{
            background-color: rgb(223, 223, 223);
            color:gray;
            border:none;
            cursor: pointer;
            border-radius: 3px;
            padding:5px 10px;
            outline: none;
        }
        .setRice.white{
            color:#ffffff;
        }
        .off_rice{
            color:#ffffff;
            background-color: #137cdf;
        }
        .penSize{
            width:50px;
            height:22px;
            text-indent: 0.5em;
            border:1px solid #cecece;
            color:#444444;
        }
    </style>
</head>

<body>
    <div class="content" id='content'>
        <canvas class="canvas1" id="canvas1" width="300" height="300"></canvas>
    </div>
    <p>
        <button class="setRice" id="setRice">米字虚线 ON</button>
        <button class="setRice" id="clear">清除画板</button>
        <span>画笔大小</span>
        <input type="number" placeholder="设置笔大小" class="penSize" value="1">
    </p>
    <p>
        <button class="setRice white" id="colorSelect">选择颜色</button>
    </p>

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
    <script src="js/colorpicker.js"></script>
    <script src="js/canvas_draw_lib.js"></script>
    <script>

        //获取canvas
        var canvasDom = $('#canvas1');
        var context = canvasDom[0].getContext('2d');

        //初始化工具类
        canvas_drawingBoard.init(canvasDom, context, 'colorSelect');
        
        
        //点击开启/关闭米字虚线
        var setRice = $('#setRice');
        setRice.click(function(e){

            //绘制米字虚线
            canvas_drawingBoard.setRice();

            //切换样式
            setRice.addClass('off_rice');
            setRice.text('米字虚线 ON');
        });

        //清除画板
        $('#clear').click(function(e){

            // if(!window.confirm("清除画板后无法恢复，是否继续？")){
            //     return;
            // }

            canvas_drawingBoard.__self.riceFlag = false;
            canvas_drawingBoard.__self.preventDefault(e);
            context.clearRect(0, 0, canvas_drawingBoard.__self.canvasW, canvas_drawingBoard.__self.canvasH);
            //绘制米字虚线
            //canvas_drawingBoard.__self.setRice();
            //鼠标没有按下/弹起了
            canvas_drawingBoard.__self.isMouseDown = false;
            //切换样式
            setRice.removeClass('off_rice');
            setRice.text('米字虚线 OFF');
        });

        //画笔大小
        $(".penSize").change(function(e){
            var size = $(this).val();
            // if(size > canvas_drawingBoard.__self.maxLineWidth){
            //     alert("画笔大小必须小于30");
            //     return;
            // }
            canvas_drawingBoard.__self.lineWidth = size;
        });

    </script>
</body>

</html>